iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
DevOps

以 Docker 為始的多種開源服務初探系列 第 16

Day 16 撰寫一個 dockerfile,和 vue-cli 服務進行整合開發

  • 分享至 

  • xImage
  •  

使用 Vue 作為前端框架的開發者,對於 vue-cli 想必不陌生。將 Docker 和 vue-cli 整合成一個開發環境,可以讓他人即時預覽開發環境下的成果。

步驟

  1. 開新專案,這邊新開一個名為 docker-vue-test 的 vue3 專案
    vue create docker-vue-test
  2. 建立 dockerfile
cd docker-vue-test
### Dockerfile in docker-vue-test
FROM node:12-alpine
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
EXPOSE 8080 #容器建立後,其預設開啟 8080 對外
  1. 從 dockerfile 建立一個名為 docker-vue-test 的映像檔
    docker build . -t docker-vue-test
  2. docker images 檢查是否建立成功
REPOSITORY                                                   TAG                            IMAGE ID            CREATED             SIZE
docker-vue-test                                              latest                         12a507b72910        47 minutes ago      232MB
  1. 用下列指令綁定「本機端的資料夾」和「新建立的容器內的資料夾」連通,並建立容器
docker run -it -p 1234:8080 -v <本機端的 docker-vue-test 絕對路徑>:/app docker-vue-test sh
  1. 建立後會載入到容器內的 /app 資料夾,在裡面啟動 npm run serve 就完成了
    Demo

採坑

  1. 為何容器內的 app 資料夾僅有 package-lock.json?
    其實映像檔內是有資料的,但你在啟動一個新容器時,你的本機端的 vue 專案資料夾的絕對路徑有錯,所以才會導致剩下 package-lock.json

參考資料

  1. Docker, Vue Cli 整合 (2)
  2. Vue - 使用 Docker 佈署
  3. Dockerize Vue.js App

上一篇
Day 15 再手動安裝個 Python3 容器看看
下一篇
Day 17 Dockerfile 和 Docker-Compose 的差異
系列文
以 Docker 為始的多種開源服務初探30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言